/**
 * canvas 的通用接口
 */
coos.canvas = function(){};

/**
 * 绑定canvas,判断如果是ie浏览器则导入google的excanvas.js
 */
coos.canvas.bind = function(){
	if(coos.browser.msie){
		coos.include.script("excanvas.js");
	}
};

/**
 * 初始化界面,把包含canvasTitle属性的div自动加上canvas边框
 */
coos.canvas.init = function(){
	var divs = coos.$tag("div");
	var len = divs.length;
	for(var i = 0; i < len; i++)
	{
		if(divs[i].getAttribute("canvasTitle") != null){
			coos.canvas.title(divs[i]);	
		}
	}
};

/**
 * 获得画布对象
 */
coos.canvas.getContext = function(el){
	var canvas = coos.$$(el);
	if(canvas.getContext){
		return canvas.getContext('2d');	
	}else{
		return null;
	}
};

/**
 * 提示框函数，边框宽高为div宽高，在div中加入canvasTitle属性，属性值为json对象接受参数如下：
 * @param color 边框颜色，默认为红色
 * @param radius 边框的弧度，默认为8
 * @param width 边框的宽度，默认取div的宽度，取不到默认为150
 * @param height 边框的高度，默认取div的高度，取不到默认为30
 * @param corner 边框尖角的高度 宽度*2 默认为6
 * @param alpha 透明度，默认为1，不透明
 * @param backgroundColor 背景色,默认没有背景色
 * @param style 边框的更多样式，默认为空
 * @param id canvas对象的ID,默认为div.id_canvas
 * @exsample  <div id="test2Div" style="width:380px;height:30px;padding:5px;text-align: center;"  canvasTitle="{color:'#FFB100',radius:8,corner:6,id:'canvas2'}">
     test2 {color:'#FFB100',radius:8,corner:6,id:'canvas2'}
  </div>
  <br><br>
   <div id="test3Div" style="width:320px;height:20px;padding:5px;text-align:center;border: 1px solid #ccc;"  canvasTitle="{width:330,height:50,style:'padding:-5px;'}">
     test3 {width:330,height:50,style:'padding:-5px;'}
  </div>
 */
coos.canvas.title = function(obj){
	var attr = obj.getAttribute("canvasTitle").toJson();
	var color = attr.color || "red";//边框颜色，默认为红色
	var radius = attr.radius || 8;//边框的弧度，默认为8
	var width = attr.width || parseInt(obj.style.width,10) || 150;//内容的宽度，默认150
	var height = attr.height || parseInt(obj.style.height,10) || 30;//内容的高度，默认30
	var corner = attr.corner || 6;//边框尖角的高度 宽度*2 默认为6
	var style = attr.style || "";
	var backgroundColor = attr.backgroundColor || "";
	var alpha = attr.alpha || 1;
	var canvasid = attr.id || (obj.id + "_canvas");//canvas对象的ID,默认为div.id_canvas

	var canvas = coos.$create("canvas");
	canvas.id = canvasid;
	//ie下width height属性不能带px单位,否则excanvas会报错
	canvas.width = width;
	canvas.height = height;
	var top = coos.$top(obj);
	var left =  coos.$left(obj);
	//css中火狐下必须加上px单位，否则不生效，火狐下obj不能隐藏，否则读取不到top left属性
	if(obj.style.display == "none"){
		top = coos.$top(obj.parentNode);
		left =  coos.$left(obj.parentNode);
	}
	canvas.style.cssText = "position: absolute;top:" + top + "px;left:" + left + "px;" + style;
	//coos.$append(obj.parentNode,canvas);
	coos.$append(document.body,canvas);
	//如果是ie则要调用excanvas接口来初始化
	if(coos.browser.msie){
		G_vmlCanvasManager.initElement(canvas);
	}
	//获得画布对象
	var ctx = canvas.getContext('2d');
	ctx.beginPath();
	ctx.strokeStyle = color;

	var tx = 0.5;//tx为x坐标偏移量
	height = height-corner;//线的高度
	ctx.moveTo(tx,tx+radius);
	//The arc(x, y, radius, startAngle, endAngle, anticlockwise) method draws an arc.
	ctx.arc(radius,radius+tx,radius,-Math.PI,-Math.PI/2,false);
	ctx.lineTo(width-radius,tx);
	ctx.arc(width-radius-tx,radius+tx,radius,-Math.PI/2,0,false);
	ctx.lineTo(width,height-radius);
	ctx.arc(width-radius-tx,height+tx-radius,radius,0,Math.PI/2,false);
	//从右下角开始往左画
	ctx.lineTo(width/2+corner/2,height+tx);
	ctx.lineTo(width/2,height+corner);
	ctx.lineTo(width/2-corner/2,height+tx);
	ctx.lineTo(tx+radius,height+tx);
	ctx.arc(tx+radius,height+tx-radius,radius,Math.PI/2,Math.PI,false);
	ctx.lineTo(tx,tx+radius);
	//透明度
	ctx.globalAlpha = alpha;
	//如果设置了背景色
	if(backgroundColor != ""){
		ctx.fillStyle = backgroundColor;
		ctx.fill();
	}else{
		ctx.stroke();
	}
};

/**
 * 显示隐藏的canvasTitle，自动显示对应canvas，并调整top left属性
 * @param obj 需要画title的div
 */
coos.canvas.title.show = function(obj){
	var obj = coos.$$(obj);
	coos.$show(obj);
	var attr = obj.getAttribute("canvasTitle").toJson();
	var canvasid = attr.id || (obj.id + "_canvas");
	var cv = coos.$(canvasid);
	cv.style.top = coos.$top(obj) + "px";
	cv.style.left = coos.$left(obj) + "px";
	coos.$show(cv);
};

/**
 * 隐藏canvasTitle,自动隐藏对应canvas
 * @param obj 需要画title的div
 */
coos.canvas.title.hide = function(obj){
	var obj = coos.$$(obj);
	var attr = obj.getAttribute("canvasTitle").toJson();
	var canvasid = attr.id || (obj.id + "_canvas");
	coos.$hide(obj);
	coos.$hide(canvasid);
};

/**
 * 画圆角边框函数
 * @param ctx canvas content
 * @param x 左上角点的x坐标
 * @param y 左上角点的y坐标
 * @param width 边框的宽度(超过canvas对象的宽度部分显示不了)
 * @param height 边框的高度(超过canvas对象的高度部分显示不了)
 * @param radius 边框圆角的弧度
 * @param color 边框线条的颜色，默认为fillStyle的颜色
 */
coos.canvas.roundedRect = function(ctx,x,y,width,height,radius,color){
	ctx.beginPath();
	if(!color){
		color = ctx.fillStyle;
	}
	ctx.strokeStyle = color;
	ctx.moveTo(x,y+radius);
	ctx.lineTo(x,y+height-radius);
	ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
	ctx.lineTo(x+width-radius,y+height);
	ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
	ctx.lineTo(x+width,y+radius);
	ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
	ctx.lineTo(x+radius,y);
	ctx.quadraticCurveTo(x,y,x,y+radius);
	ctx.stroke();
};

//自动绑定浏览器兼容函数
coos.canvas.bind();

//自动初始化
coos.onloadEvent(coos.canvas.init);

